<!DOCTYPE html>
<html>
<head>
    <title>计分器</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
            background: white;
        }
        
        .roaming {
            /*位于画面上方，居中*/
            position: absolute;
            top: 0;
            left: 0;
            text-align: center;
            /*文字加粗，字体大小*/
            font-weight: bold;
            font-size: 30px;
        }

        .left-side-score, .right-side-score {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 0 50px;
        }
        
        h1 {
            font-size: 5rem;
            margin: 0 0 20px 0;
        }
        
        .left-arrow, .right-arrow {
            width: 0;
            height: 0;
            border-style: solid;
        }
        
        .left-arrow {
            border-width: 20px 30px 20px 0;
            border-color: transparent black transparent transparent;
            /* color: black; */
        }
        
        .right-arrow {
            border-width: 20px 0 20px 30px;
            border-color: transparent transparent transparent black;
        }

        button{
            margin: 20px 0 0 0;
            padding: 10px 20px;
            border: none;
            background: #0068f1;
            border-radius: 10px;
            color: white;
            cursor: pointer;
            /*鼠标悬停时，出现阴影*/
            transition: 0.3s;
        }

        .reset{
            margin: 20px 0 0 20px;
            padding: 10px 20px;
        }

        .set_message{
            margin: 20px 0 0 20px;
            padding: 10px 20px;
        }

        .back{
            margin: 20px 0 0 20px;
            padding: 10px 20px;
        }

        .name{
            font-size: 24px;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <p class="roaming" id="roaming"></p>
    <div class="left-side-score" id="left-side-score">
        <p id="left-name" class="name"></p>
        <h1 id="left-number">0</h1>
        <p id="left-shot-score" style="display: none;">0</p>
        <p id="left-none-score" style="display: none;">0</p>
        <div class="left-arrow" id="left-arrow"></div>
    </div>

    <div class="right-side-score" id="right-side-score">
        <p id="right-name" class="name"></p>
        <h1 id="right-number">0</h1>
        <p id="right-shot-score" style="display: none;">0</p>
        <p id="right-none-score" style="display: none;">0</p>
        <div class="right-arrow" id="right-arrow"></div>
    </div>

    <button id="cheak">查看记录</button>
    <button id="reset" class="reset">重置</button>
    <button id="set_message" class="set_message">设置数据</button>
    <button id="back" class="back">返回</button>
    <script>
        if (localStorage.getItem("table_ball_number") === null){
            localStorage.setItem("table_ball_number", [0,15,1,1,1,1,1,1]);
        }
        

        let score = [0, 0];
        let shot_score = [0, 0];
        let none_score = [0, 0];//罚分
        let side_number = 0;//0为左边，1为右边
        let last_shot = 0;//记录上一次击球
        const table_ball_number = localStorage.getItem("table_ball_number").split(","); //台面球的数量，对应：[空余,红,黄,绿,棕,蓝,粉,黑]
        // const table_ball_number = [0,15,1,1,1,1,1,1]
        const ball_points = [0,1,2,3,4,5,6,7]
        let table_ball_roaming = table_ball_number;
        let roaming = 0;//记录台面剩余
        let color_ball_state = 0;//清彩阶段记录
        let cheak_state = 0;//记录是否查看过记录
        const bg_color = "white";
        // let button_show_state = 1;//记录按钮是否显示
        document.getElementById("left-name").innerHTML = localStorage.getItem("left-name");
        document.getElementById("right-name").innerHTML = localStorage.getItem("right-name");

        document.getElementById("cheak").addEventListener("click", function(){
            cheak();
        });

        document.getElementById("reset").addEventListener("click", function(){
            reset();
        });

        document.getElementById("back").addEventListener("click", function(){
            window.location.href = "./start_cx.html"
        });

        // const modal = document.getElementById("modal");
        document.getElementById("set_message").addEventListener("click", function(){
            input_ball_number();
        });
        
        function input_ball_number() {
            const userInput = prompt("请输入您要设置的红球数量：（标准球台为15颗）", "15");
            if(userInput !== null){

                if (Number(userInput) !== NaN){
                    const regex = /^([1-9]|[12]\d|30)$/;
                    if (regex.test(userInput)){
                        localStorage.setItem("table_ball_number", [0,Number(userInput),1,1,1,1,1,1]);
                        alert("设置成功");
                    }else{
                        alert("请输入正确的数字");
                        input_ball_number();
                    }
                }else{
                    alert("请输入正确的数字");
                    input_ball_number();
                }
            }
        }

        function cheak_roaming() {
            let sum = 0;
            if(last_shot === 1){
                //击打了红球
                table_ball_roaming[1] -= 1;
                const red_ball_number = table_ball_roaming[1];
                sum = red_ball_number * 8;
                for(let i=2;i<=7;i++){
                    sum += table_ball_roaming[i] * ball_points[i];
                };
                return sum;
            }else {
                //击打了彩球
                if(table_ball_roaming[1] === 0){
                    //没有红球剩余
                    if(color_ball_state === 0){
                        if (table_ball_roaming[2] === 1){
                            color_ball_state = 1;
                            // console.log("return 27")
                            return 27;
                        }
                    }
                    if (last_shot === 7){
                        // console.log("return 0")
                        return 0;
                    }else{
                        table_ball_roaming[last_shot] -= 1;
                        for(let i = last_shot + 1;i<=7;i++){
                            sum += table_ball_roaming[i] * ball_points[i];
                        }
                        return sum;
                    }
                }else{
                    //有红球剩余
                    const red_ball_number = table_ball_roaming[1];
                    sum = red_ball_number * 8;
                    for(let i=2;i<=7;i++){
                        sum += table_ball_roaming[i] * ball_points[i];
                    };
                    return sum;
                }
            }
        }
        function show_score() {

            document.getElementById("left-name").innerHTML = localStorage.getItem("left-name");
            document.getElementById("right-name").innerHTML = localStorage.getItem("right-name");

            document.getElementById("left-number").innerHTML = score[0];
            document.getElementById("right-number").innerHTML = score[1];
            if(side_number === 0){
                document.getElementById("right-arrow").style.borderColor = `transparent transparent transparent ${bg_color}`;
                document.getElementById("left-arrow").style.borderColor = "transparent black transparent transparent";
            }else{
                document.getElementById("left-arrow").style.borderColor = `transparent ${bg_color} transparent transparent`;
                document.getElementById("right-arrow").style.borderColor = "transparent transparent transparent black";
            }
            if(last_shot != 0){
                //TODO
                roaming = cheak_roaming();
                document.getElementById("roaming").innerHTML = `Disparity/差距: ${Math.abs(score[1] - score[0])} , Remaining/台面剩余: ${roaming}`;
                // console.log(table_ball_roaming)
            }else{
                document.getElementById("roaming").innerHTML = `Disparity/差距: ${Math.abs(score[1] - score[0])} , Remaining/台面剩余: ${roaming}`;
            }
        }
        function get_another_side_number(number) {
            if(number === 0){
                return 1;
            }else{
                return 0;
            }
        }

        show_score();
        document.addEventListener("keydown", function (e) {
            if(e.key === '4' && e.altKey){
                e.preventDefault();
                // console.log("alt+4");
                score[get_another_side_number(side_number)] += 4;
                none_score[side_number] += 4;
                last_shot = 0;
            }else if(e.key === '5' && e.altKey){
                e.preventDefault();
                score[get_another_side_number(side_number)] += 5;   
                none_score[side_number] += 5;
                last_shot = 0;
            }else if(e.key === '6' && e.altKey){
                e.preventDefault();
                score[get_another_side_number(side_number)] += 6;
                none_score[side_number] += 6;
                last_shot = 0;
            }else if(e.key === '7' && e.altKey){
                e.preventDefault();
                score[get_another_side_number(side_number)] += 7;
                none_score[side_number] += 7;
                last_shot = 0;
            }else if (e.key === '1') {
                score[side_number] += 1;
                shot_score[side_number] += 1;
                last_shot = 1;
            }else if (e.key === '2') {
                score[side_number] += 2;
                shot_score[side_number] += 2;
                last_shot = 2;
            }else if (e.key === '3') {
                score[side_number] += 3;
                shot_score[side_number] += 3;
                last_shot = 3;
            }else if (e.key === '4') {
                score[side_number] += 4;
                shot_score[side_number] += 4;
                last_shot = 4;
            }else if (e.key === '5') {
                score[side_number] += 5;
                shot_score[side_number] += 5;
                last_shot = 5;
            }else if (e.key === '6') {
                score[side_number] += 6;
                shot_score[side_number] += 6;
                last_shot = 6;
            }else if (e.key === '7') {
                score[side_number] += 7;
                shot_score[side_number] += 7;
                last_shot = 7;
            }else if (e.key === "Enter") {
                if(side_number === 0){
                    side_number = 1;
                }else {
                    side_number = 0;
                };
                last_shot = 0;
            };
            show_score();
        });
        


        function cheak(){
            //弹出窗口，显示得分、罚分、净得分
            if(cheak_state === 0){
                cheak_state = 1;
                document.getElementById("left-arrow").style.borderColor = `transparent ${bg_color} transparent transparent`;
                document.getElementById("right-arrow").style.borderColor = `transparent transparent transparent ${bg_color}`;

                document.getElementById("left-shot-score").style.display = "block";
                document.getElementById("left-shot-score").innerHTML = `净得分：${shot_score[0]}`;
                document.getElementById("right-shot-score").style.display = "block";
                document.getElementById("right-shot-score").innerHTML = `净得分：${shot_score[1]}`;

                document.getElementById("left-none-score").style.display = "block";
                document.getElementById("left-none-score").innerHTML = ` 罚分：${none_score[0]}`;
                document.getElementById("right-none-score").style.display = "block";
                document.getElementById("right-none-score").innerHTML = ` 罚分：${none_score[1]}`;

                document.getElementById("cheak").innerHTML = "返回";
            }else{
                last_shot = 0;
                show_score();
                document.getElementById("left-shot-score").style.display = "none";
                document.getElementById("right-shot-score").style.display = "none";
                document.getElementById("left-none-score").style.display = "none";
                document.getElementById("right-none-score").style.display = "none";

                document.getElementById("cheak").innerHTML = "查看记录";
                cheak_state = 0;
            };
        }
        function reset() {
            const isConfirmed = confirm("确定要重置吗？");
            if (!isConfirmed) {
                return;
            }else{
                score = [0,0];
                shot_score = [0,0];
                none_score = [0,0];
                side_number = 0;
                last_shot = 0;
                roaming = 0;
                table_ball_roaming = table_ball_number;
                localStorage.setItem("left-name", "");
                localStorage.setItem("right-name", "");
                show_score();
            }
        }
    </script>
</body>

</html>
